import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_learn_demo/define/define_alert_dialog.dart';

import 'define/define_dialog.dart';

class Search extends StatefulWidget {

  const Search({super.key});

  @override
  State createState() => SearchState();
}

class SearchState extends State<Search> with AutomaticKeepAliveClientMixin {

  double sWidth = 0;
  double sHeight = 0;

  GlobalKey globalKey = GlobalKey();

  double _left = 0;
  double _top = 0;

  var updateOffset = true;

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
       sWidth = globalKey.currentContext!.size!.width;
       sHeight = globalKey.currentContext!.size!.height;
       //获取屏幕宽高
       //MediaQuery.of((globalKey.currentContext)!).size;
    });
  }

  @override
  Widget build(BuildContext context) {
      if (updateOffset) {
         var size = MediaQuery.of(context).size;
         _left = size.width - 60 - 10;
         _top = size.height * 2 / 3;
         updateOffset = false;
      }

      double dividerHeight = 2;
      //分割线Divider  height属性值需与thickness相同  否则不能填充满
      Widget divider1 =  Divider(color: Colors.redAccent,height: dividerHeight,thickness: dividerHeight,);
      Widget divider2 =  Divider(color: Colors.blue,height: dividerHeight,thickness: dividerHeight,);
      var listView = ListView.separated(
          itemCount: 35,
          itemBuilder: (BuildContext buildContext,int index) {
          var result = index % 3;
          if (result == 0) {
            return Container(
              height: 60,
              child: Material(
                child: Ink(
                  decoration: const BoxDecoration(color:Colors.yellow),
                  child: InkWell(
                    //borderRadius: BorderRadius.circular(10),
                    onTap: () {
                      showDialog(
                        context: context,
                        builder: (BuildContext context) {
                          var child = Center(child: Text('$index',style: const TextStyle(color:Colors.cyanAccent,fontSize: 18),),);
                          return DefineAlertDialog(child: child);
                        },
                      );
                    },
                    child: Row(
                      children: [
                        const SizedBox(width: 20,),
                        const Icon(Icons.add),
                        const SizedBox(width: 20,),
                        Text("$index",style: const TextStyle(color: Colors.red,fontSize: 16),),
                      ],
                    ),
                  ),
                ),
              ),
            );
          } else if (result == 1) {
            return Container(
              height: 60,
              child: Material(
                child: Ink(
                  decoration: const BoxDecoration(color:Colors.yellow),
                  child: InkWell(
                    //borderRadius: BorderRadius.circular(10),
                    onTap: () {
                      showDialog(
                        context: context,
                        builder: (BuildContext context) {
                          var child = Center(child: Text('$index',style: const TextStyle(color:Colors.cyanAccent,fontSize: 18),),);
                          return DefineAlertDialog(child: child);
                        },
                      );
                    },
                    child: Row(
                      children: [
                        const SizedBox(width: 20,),
                        const Icon(Icons.add),
                        const Spacer(),
                        Text("$index",style: const TextStyle(color: Colors.red,fontSize: 16),),
                        const SizedBox(width: 20,),
                      ],
                    ),
                  ),
                ),
              ),
            );

          } else if (result == 2) {
            return Container(
              height: 60,
              child: Material(
                child: Ink(
                  decoration: const BoxDecoration(color:Colors.yellow),
                  child: InkWell(
                    onTap: () {
                       showDialog(
                         context: context,
                         builder: (BuildContext context) {
                           var child = Center(child: Text('$index',style: const TextStyle(color:Colors.cyanAccent,fontSize: 18),),);
                           return DefineDialog(child: child);
                         },
                       );
                    },
                    child: Row(
                      children: [
                        const SizedBox(width: 20,),
                        const Icon(Icons.add),
                        const Spacer(),
                        Container(width: 30,height:30,color: Colors.indigoAccent,),
                        const Spacer(),
                        Text("$index",style: const TextStyle(color: Colors.red,fontSize: 16),),
                        const SizedBox(width: 20,),
                      ],
                    ),
                  ),
                ),
              ),
            );
          }
        },
        separatorBuilder: (BuildContext buildContext,int index) {
          return index % 2 == 0 ? divider2 : divider1;
        },
      );

      return Scaffold(
         key: globalKey,
         body: GestureDetector(
           onPanUpdate: (details) {
             setState(() {
               _left += details.delta.dx;
               _top += details.delta.dy;
               _left = max(0, min(_left, sWidth - 60));
               _top = max(0, min(_top, sHeight - 60));
               print("_left:$_left,_top:$_top");
             });
           },
           child: Stack(children: [
               listView,
               Container(
                 margin: EdgeInsets.only(left: _left,top: _top),
                 width: 60,
                 height: 60,
                 child: FloatingActionButton(
                   onPressed: () {
                     print("onPressed");
                   },
                   child: const Text('添加'),
                 ),
               )
             ],
           ),
         ),
      );
  }

  @override
  bool get wantKeepAlive => true;

}

// Widget createListView(BuildContext context) {
//       Widget divider1 = const Divider(color: Colors.redAccent,);
//       Widget divider2 = const Divider(color: Colors.blue,);
//       return ListView.separated(
//          itemCount: 35,
//          itemBuilder: (BuildContext buildContext,int index) {
//             if (index % 3 == 0) {
//               return Container(
//                 height: 60,
//                 child: Material(
//                   child: Ink(
//                     decoration: const BoxDecoration(color:Colors.yellow),
//                     child: InkWell(
//                       //borderRadius: BorderRadius.circular(10),
//                       onTap: () {
//                         print("onTap---object");
//                       },
//                       child: Row(
//                           children: [
//                             const SizedBox(width: 20,),
//                             const Icon(Icons.add),
//                             const SizedBox(width: 20,),
//                             Text("$index",style: const TextStyle(color: Colors.yellow,fontSize: 16),),
//                           ],
//                         ),
//                     ),
//                   ),
//                 ),
//               );
//             } else if (index % 3 == 1) {
//               return Container(
//                 height: 60,
//                 child: Row(
//                   children: [
//                     const SizedBox(width: 20,),
//                     const Icon(Icons.add),
//                     const Spacer(),
//                     Text("$index",style: const TextStyle(color: Colors.yellow,fontSize: 16),),
//                     const SizedBox(width: 20,),
//                   ],
//                 ),
//               );
//             } else {
//               return Container(
//                 height: 60,
//                 child: Row(
//                   children: [
//                     const SizedBox(width: 20,),
//                     const Icon(Icons.add),
//                     const Spacer(),
//                     Container(width: 30,color: Colors.indigoAccent,),
//                     const Spacer(),
//                     Text("$index",style: const TextStyle(color: Colors.yellow,fontSize: 16),),
//                     const SizedBox(width: 20,),
//                   ],
//                 ),
//               );
//             }
//          },
//         separatorBuilder: (BuildContext buildContext,int index) {
//             return index % 2 == 0 ? divider2 : divider1;
//         },
//       );
// }